<template>
	<div class="app">
		<myNavbar title="推广中心"></myNavbar>
		<div class="deposit">
			<div style="height:40px;width:750px;">
				<image class="vein" src="http://cdn.rzico.com/v4.0/mine-bg.png"></image>
			</div>
			<div class="header">
				<div class="header-info">
					<div style="height:115px;width:115px;display: flex;justify-content: center;align-items: center">
						<image :src="avatar" style="height:100px;width:100px;border-radius: 300px;"></image>
					</div>
					<text style="margin-left:20px;font-size: 30px;">{{memberName}}</text>
				</div>
			</div>
		</div>
		<div class="total-deposit-bottom">
			<div class="total-deposit-money">
				<div>
					<text style="color:rgba(0,0,0,0.5);font-size: 30px;margin-left: 10px;margin-top:10px">当前金币余额</text>
				</div>
				<div style="width:300px;align-items: flex-end;">
					<div style="display:flex;flex-direction: row; align-items: flex-end;justify-content: flex-end;">
						<div style="height:45px;width:45px;display:flex;flex-direction: row;  margin-right: 3px">
							<image src="http://cdn.rzico.com/znzx/image/memberGold.png" style="width:45px;height:45px"></image>
						</div>
						<text style="font-weight:700;font-size: 30px;">{{point}}</text>
					</div>
					<div>
						<text style="font-size:18px;color:rgba(0,0,0,0.5);margin-top: 5px;">可提现:¥{{point/100}}</text>
					</div>
				</div>

			</div>
		</div>
		<div class="botton-deposit">
			<div class="botton-deposit-title-content">
				<div class="vertical"></div>
				<text class="title">应用服务</text>
			</div>
			<div class="botton-deposit-botton-content">
				<div class="button-content" @click="toBucket">
					<div class="button">
						<image src="http://rzico.oss-cn-shenzhen.aliyuncs.com/img/invitation.png" style="height:60px;width:60px;"></image>
					</div>
					<div class="title-button"><text style="font-size: 30px;">我邀请的会员</text></div>
				</div>
				<div class="button-content" @click="toWithdrawal">
					<div class="button">
						<image src="http://rzico.oss-cn-shenzhen.aliyuncs.com/img/history.png" style="height:60px;width:60px;"></image>
					</div>
					<div class="title-button"><text style="font-size: 30px;">我的推广订单</text></div>
				</div>
			</div>
		</div>
		<div class="detailed-content">
			<div class="detailed-title-content">
				<div class="vertical"></div>
				<text class="title">最新金币明细</text>
			</div>
			<list>
				<cell v-for="item in detailedList" class="detailed-box-content">
					<div style="display:flex; flex-direction: row;justify-content: space-between;">
						<div style="display:flex;flex-direction: row;">
							<image :src="item.thumbnail" style="height:60px;width:60px;margin-top:10px"></image>
							<div class="detailed-title">
								<text class="detailed-name">{{item.memo}}</text>
								<text class="detailed-date">{{item.createDate}}</text>
							</div>
						</div>
						<div class="price-content">
							<div style="display:flex;flex-direction: row;align-items: flex-end;justify-content: flex-end;">
								<text class="price" v-if="item.type==0 && (item.credit-item.debit) !=0">+</text>
								<text class="price" :class="[item.credit-item.debit>0?'price':'reducePrice']">{{(item.credit-item.debit)}}</text>
							</div>
							<div style="display:flex; flex-direction: row; align-items: flex-end;justify-content: flex-end;margin-top: 10px">
								<text class="yue">余额：¥{{item.balance}}</text>
							</div>
						</div>
					</div>
				</cell>
			</list>
		</div>

	</div>
</template>
<script>
	import myNavbar from '../../../components/myNavbar/myNavbar.vue';
	import {
		list
	} from '../../../api/ponit.js'
	import {
		find
	} from '../../../api/member.js'
	import {memberList} from '../../../api/member.js'
	export default {
		name: '',
		data() {
			return {
				point: '',
				homeInfo: {},
				id: '',
				memberName: '',
				pageNum: 1,
				avatar: '',
				pageSize: 1000,
				isRuleShow: false,
				dialogShow: false,
				memberInfo: {},
				oneButton: [{
					text: '确定'
				}],
				showOneButtonDialog: false,
				detailedList: []
			}
		},
		created() { // 在实例创建完成后被立即调用
			this.id = app.config.params
			// this.avatar=this.getGlobalData().userInfo.avatar
			this.loadPromoter()
			this.loadPoint()
			this.loadMyMember()
		},
		methods: {
			loadMyMember(){
				memberList({
					memberId:this.id
				}).then(res=>{
				})
			},
			loadPromoter() {
				find(
					this.id
				).then(res => {
					if (!res.data.member.avatar) {
						this.avatar = 'http://rzico.oss-cn-shenzhen.aliyuncs.com/img/avatar.png'

					} else {
						this.avatar = res.data.member.avatar
					}
					this.memberName = res.data.member.name
					this.point = res.data.point
					this.memberInfo = res.data

				})
			},
			toBucket(){
				const eeui = app.requireModule('eeui');
				eeui.openPage({
						url: 'root://pages/member/distribution/component/myInvitation.js',
						statusBarType: 'immersion',
						params: this.id,
						statusBarStyle: false
					},
					(result) => {

					}
				);
			},
			toWithdrawal(){
				const eeui = app.requireModule('eeui');
				eeui.openPage({
						url: 'root://pages/member/distribution/component/popularize.js',
						statusBarType: 'immersion',
						params: this.id,
						statusBarStyle: false
					},
					(result) => {

					}
				);
			},
			loadPoint() {
				if (this.pageNum == 1) {
					this.detailedList = []
				}
				list({
					memberId: this.id,
					pageSize: this.pageSize,
					pageNum: this.pageNum
				}).then(res => {

					res.data.data.forEach(item => {
						item.createDate = this.formatTime(item.createDate)
						item.thumbnail = 'http://cdn.rzico.com/v4.0/wallet-consumption.png'
						this.detailedList.push(item)
					})

				})
			},
		},
		components: {
			myNavbar
		},
	}
</script>

<style scoped>
	.app {
		flex: 1;
		background-color: rgb(248, 248, 248);
	}

	.vein {
		position: absolute;
        width: 750px;
        height: 500px;
	}

	.rule-content {
		z-index: 200;
		position: fixed;
		background-color: rgba(0, 0, 0, 0.5);
		flex: 1;
		width: 750px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.rule-dio {
		display: flex;
		padding-top: 20px;
		flex-direction: column;
		align-items: center;
		height: 300px;
		width: 710px;
		background-color: white;
		border-radius: 16px;
	}

	.rule-text {
		height: 150px;
		width: 710px;
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: center;
	}

	.yue {
		font-size: 24px;
		font-weight: 400;
		color: #1a1a1e;
		opacity: 0.3;
	}

	.rule-click {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 60px;
		width: 170px;
		background: linear-gradient(to right, #474747, #474747);
		color: #b19e81;
		border-radius: 14px;
	}

	.rule-title {
		color: #b19e81;

	}

	.deposit {
		width: 750px;
		background-image: linear-gradient(to bottom, #c2c2c2, #f8f8f8);

	}

	.price-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.total-deposit {
		width: 750px;
		height: 300px;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.total-deposit-head {
		width: 655px;
		padding-top: 30px;
		height: 105px;
		background: linear-gradient(to right, #f7dec5, #f0d0a7);
		border-top-left-radius: 16px;
		border-top-right-radius: 16px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-left: 20px;
		padding-right: 20px;
	}

	.total-deposit-bottom {

		background-color: white;
		width: 750px;

		padding: 20px;
	}

	.aaaa {
		width: 750px;
		height: 91px;
	}

	.total-deposit-money {
		width: 695px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;

	}

	.botton-deposit {
		margin-top: 20px;
		padding-top: 20px;
		background-color: white;
		padding-left: 30px;
		padding-bottom: 30px;
	}

	.botton-deposit-title-content {
		width: 143px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.vertical {
		margin-top: 10px;
		height: 30px;
		width: 10px;
		background-image: linear-gradient(to bottom, #FFFFF0, #FFD39B);
	}

	.botton-deposit-title {
		font-size: 30px;
	}

	.botton-deposit-botton-content {
		display: flex;
		flex-direction: row;
		justify-content: space-around;

	}

	.title-button {
		margin-top: 10px;
		font-size: 28px;

	}

	.button-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 40px;
		width: 200px;

	}

	.button {
		height: 120px;
		width: 120px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 100px;
		background-image: linear-gradient(to right, #f7dec5, #f0d0a7);
	}

	.title {
		margin-top: 10px;
		font-size: 28px;
		margin-left: 20px;
	}

	.detailed-content {
		padding-top: 20px;
		padding-right: 20px;
		margin-top: 30px;
		flex: 1;
		background-color: white;
		/* 	overflow-y: auto; */
	}

	.detailed-title-content {
		width: 710px;
		padding-left: 20px;
		display: flex;
		flex-direction: row;
		margin-bottom: 40px;
		overflow: hidden;

	}

	.detailed-box-content {
		background-color: white;
		padding-right: 35px;
		padding-left: 35px;
		margin-top: 15px;
		align-content: center;
		justify-content: space-between;
        padding-bottom: 20px;
        padding-top: 20px;

	}

	.detailed-title {
		margin-left: 20px;
		width: 400px;
		display: flex;
		flex-direction: column;

	}

	.aaaaa {
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 400px;
		max-height: 92px;
	}

	.detailed-name {
		lines:1;
		text-overflow: ellipsis;
		justify-content: space-between;
		font-size: 25px;
	}

	.detailed-date {
		margin-top: 10px;
		font-size: 25px;
		color: #808080;
	}

	.price {
		float: right;
		color: #FF6347;
		font-weight: 700;
		font-size: 27px;
	}

	.reducePrice {
		float: right;
		color: black;
		font-weight: 700;
		font-size: 27px;
	}

	.invitation-button {

		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		background-color: #333333;
		color: #ffffde;
		font-size: 30px;
		border-radius: 20px;
	}

	.header {
		height: 146px;
		padding-right: 47px;
		padding-left: 30px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.header-info {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-bottom: 40px;
	}


	.rule {
		z-index: 100;
		width: 170px;
		height: 50px;
		border-radius: 20px;
		opacity: 0.8;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		align-items: center;
		font-size: 25px;
	}

	.rule-circular {
		height: 30px;
		width: 30px;
		border: 4px solid;
		color: black;
		border-radius: 50px;
		font-size: 20px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
</style>
